<template>
    <div class="score-header">
        <div class="face"><img :src="faceUrl" alt=""></div>
        <h4 class="name">{{ nameStr }}</h4>
    </div>
    <div class="score-header-line">
        <span></span>
        <span></span>
    </div>
</template>
<script setup>
import { computed } from "vue"
const props = defineProps({
    name: {
        type: String,
        default: ''
    },
    face: {
        type: String,
        default: ''
    }
})

const nameStr = computed(() => props.name )
const faceUrl = computed(() => props.face )
</script>
<style lang="scss" scoped>
.score-header {
	padding: 2rem;
	display: flex;
	align-items: center;
	.face {
		border: .3rem solid rgba(255, 255, 255, .5);
	}
	.face, img {
		width: 6rem;
		height: 6rem;
		overflow: hidden;
		border-radius: 100px;
	}
	.name {
		color: #fff;
		font-size: 1.8rem;
		margin-left: 1rem;
		line-height: 1rem;
	}
}
.score-header-line {
	margin-bottom: 2rem;
	position: relative;
	border-bottom: .2rem dotted #f4b7a2;
	> span {
		position: absolute;
		height: 1.6rem;
		width: 1.6rem;
		border-radius: 100px;
		background-color: #f4b7a2;
		top: -0.8rem;
	}
	> span:first-child {
		right: -0.8rem;
	}
	> span:last-child {
		left: -0.8rem;
	}
}
</style>